<template>
    <div id="tmpl">
        <!--1.0 实现的是图片详情和缩略图-->
        <div id="desc">
            <!--图片详情-标题部分-->
            <div class="title">
                <h4>{{photoinfo.title}}</h4>
                <p>
                    {{photoinfo.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}} {{photoinfo.click}}次浏览
                </p>
                <p class="line"></p>
            </div>
            <!--图片缩略图-->
            <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <!--<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">-->
                        <!--<a href="#" to="/news/newslist">-->
                            <!--<span class="mui-icon mui-icon-home"></span>-->
                        <!--</a>-->
                    <!--</li>-->
                    <vue-preview @click="setimgviewsize()" :slides="list" @close="handleClose"></vue-preview>
                </ul>
            </div>

            <!--图片详情-摘要部分-->
            <p v-html="photoinfo.content"></p>

        </div>




        <!--2.0 集称评论组件-->
        <div id="comment">
            <comment :id="id"></comment>
        </div>
    </div>
</template>

<script>
    //1.0 导入评论组件
    import comment from '../subcom/comment.vue';
    import common from '../../kits/common.js';
    import {Toast} from 'mint-ui';


    export default {
        components: {
            comment //注册评论组件
        },
        data() {
            return {
                id: 0, //图片id
                photoinfo: {}, //图片的详细描述对象
                list: [ //负责存储缩略图数据
                ]
            }
        },
        created() {
            this.id = this.$route.params.id;
            //ajax请求图片的详情数据
            this.getinfo();

            //请求缩略图
            this.getimage();

        },
        updated() {
            //在更新时调用该方法
            this.setimgpreviewsize();
        },
        methods: {
            //3.0 改变预览视图大小
            setimgpreviewsize() {
                var imgs = document.querySelectorAll("#desc > div.mui-content > ul > div > div.my-gallery  img");
                imgs.forEach(function (item) {
                    item.style.width = "100%";
                })
            },
            //2.0 获取缩略图数据
           getimage() {
                var url = common.apidomain + "/GetThum?id=" + this.id;
                this.$http.get(url).then(function (resp) {
                    var body = resp.body;
                    if(body.status!=0) {
                        Toast(body.message);
                        return;
                    }
                    //将正常的逻辑数据赋值给this.list;
                    body.message.forEach(function (item) {
                        //TODO 调整宽高为原来图片的大小
                        item.h = 600;
                        item.w = 600;
                    })
                    this.list = body.message;
                })
            },
            //1.0获取图片的详细描述数据
            getinfo() {
                var url = common.apidomain + "/GetPhotoInfo?id=" +this.id;
                this.$http.get(url).then(function (resp) {
                    var body = resp.body;
                    if(body.status!=0) {
                        Toast(body.message);
                        return;
                    }
                    //将正常的逻辑数据赋值给this.photolist对象
                    this.photoinfo = body.message[0];
                })
            },
            handleClose () {
                console.log('close event')
            }
        }
    }
</script>

<style scoped>
    /*图片详情样式*/
    #desc {
        padding: 10px;
    }
    #desc .title h4{
        color:#0094ff;
    }

    #desc .title p {
        color: rgba(0, 0, 0, 0.4);
        margin-top: 10px;
    }

    #desc .title .line{
        width:100%;
        height: 1px;
        border-bottom: 1px solid rgba(0,0,0,0.4);
    }


    /*导航栏样式*/
    /* 把导航背景设置为白色 */
    .mui-content {
        background-color: white;
    }

    .mui-content ul {
        background-color:white;
    }

    /* 去掉按钮所有边框 */
    .mui-grid-view.mui-grid-9 {
        border-top:0px;
        border-left: 0px;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        border-right: 0px;
        border-bottom: 0px;
    }

    /*九宫格缩略图样式*/
    .mui-content img {
        width: 100px;
        height: 100px;
    }




</style>